<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Vue中的路由传参query</title>
    <!-- 引用vue.js库 -->
    <script src="https://cdn.jsdelivr.net/npm/vue@2/dist/vue.js"></script>
    <script src="https://cdn.jsdelivr.net/npm/vue-router/dist/vue-router.js"></script>
</head>
<body>
  
    <div id="app">
        <!-- 创建按钮 -->
        <!-- <input type="button" value="跳转到首页" @click="fn1()"> -->
        <input type="button" value="跳转到新闻页" @click="fn2()">
        <input type="button" value="跳转到用户页" @click="fn3()">
       
        <!-- 路由出口（路由匹配到的组件将渲染在这里） -->
        <router-view></router-view>
    </div>


    <template id="home">
        <div>
            <h2>首页</h2>
            <router-link to="/home/login">登录</router-link>
            <router-link to="/home/reg">注册</router-link>
            <router-view></router-view>
        </div>
    </template>

    <template id="login">
        <div>
            登录的界面
        </div>
    </template>

    <template id="reg">
        <div>
            注册的界面
        </div>
    </template>

    <template id="news">
        <div>
            <h1>热点新闻</h1>
            <ul>
                <li>
                    <router-link to="/news/001">新闻001</router-link>
                </li>
                <li>
                    <router-link to="/news/002">新闻002</router-link>
                </li>
            </ul>
        </div>
    </template>

    <template id="newsdetail">
        <div>
            新闻的详细页面
            {{$route.params.id}}
        </div>
    </template>

    
    <script>
        //1. 定义路由的组件
        const Home = {template:'#home'}
        const News = {template:'#news'}
        const Login = {template:'#login'}
        const Reg = {template:'#reg'}
        const NewsDetail = {template:'#newsdetail'}

        // 2. 定义路由规则对象（每个路由应该映射一个组件）
        const routes = [
        // {
        //     path:'/index/:id',
        //     name:'index',
        //     component:'<div>首页:{{$route.params.id}}</div>'
        // },
        {
            path: '/news/:id/',
            name:'news',
            component:{
                template:'<div>新闻:{{$route.params.id}}</div>'
            } 
        },
        {
            path: '/user',
            name:'user',
            component: {
                template:'<div>用户:{{$route.query.userId}}</div>'
            } 
        }
        
    ]

        // 3. 创建 router 实例，然后传 `routes` 配置
        const router = new VueRouter({
            //如果路由规则对象名也为routes，那么就可以简写为 routes
            routes  
        })


        // 4. 将路由对象挂载到Vue实例上
        // 通过 router 配置参数注入路由，从而让整个应用都有路由功能
        var vm = new Vue({
            el: '#app',
            data: {},
            // 将路由添加到Vue中
            router,
            methods: {
                fn2() {
                    //实现页面的跳转
                    this.$router.push(`/news/${Math.random()}`);
                },
                fn3() {
                    this.$router.push({
                        path:'/user',
                        query: {
                            userId:123,
                        }
                    });
                }
            }
        })

    </script>
 
</body>
</html>